<style lang="less">
  .p-EventModel {
    display: flex;
    height: 100%;
    >.ivu-menu {
      height: 100%;
      overflow-y: auto; 
      .ivu-menu-item-group-title {
          padding-left: 12px;
          // border-bottom: 1px solid var(--primary-color);
          font-size: 16px;
          font-weight: 600;
          color: #333;
      }
    }
    >.content {
      flex: 1;
      .ivu-form-item {
        max-width: 400px;
      }
    }
  }
</style>

<!-- 管理全部模型、事件、收藏的模型、收藏的事件 -->
<template>
  <div class="p-EventModel">
    <Menu :active-name="curMenuName" :open-names="['model', 'event']" width="260px">
     <template v-for="(item,index) in menuData">
        <MenuItem v-if="!item.children || !item.children.length" :key="index" :name="item.name"
          @click.native="onMenuClick(item)">
          <Icon v-if="item.icon" :type="item.icon || 'ios-options'" />{{item.label}}
        </MenuItem>
        <MenuGroup v-else :key="index" :title="item.label || item.name">
          <template slot="title"><Icon v-if="item.icon" :type="item.icon" />
            <span style="margin-left: 6px">{{item.label}}</span>
          </template>
          <MenuItem v-for="(cItem, cIndex) in item.children" :name="item.sourceType + '_' + cItem.name" :key="cIndex"
            @click.native="onMenuClick({sourceType: item.sourceType, ...cItem})">
              <Icon v-if="cItem.icon" :type="cItem.icon" />{{cItem.label || cItem.name}}
          </MenuItem>
        </MenuGroup>
      </template>
    </Menu>
    <div class="content">
      <template v-for="(item,index) in modelObj">
        <ModelList v-if="curMenuItem.sourceType ==='model' && item.name === curMenuItem.name"
          :key="index" :isPointer="false" :allData="allTmpModelData"
          :title="item.label" :type="item.name" :prefix="item.name"></ModelList>
      </template>
      <eventList v-if="curMenuItem.sourceType ==='event'"
        :searchData="{category: curMenuItem.name !== 'all' ? curMenuItem.name : null}"></eventList>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import eventList from './parts/eventList.vue'
import ModelList from './parts/modelList.vue'

export default {
  name: "cfg-eventModel",
  components: { eventList, ModelList },
  data() {
    return {
      curMenuName: '',
      curMenuItem: {},
      eventList: [],
      objectConlection: {records: []},
      allTmpModelData: [],
      modelObj: [
        {name: 'all', label: '全部模型', icon: 'ios-options'},
        {name: 'consume', label: '实体-消费模型'},
        {name: 'resource', label: '实体-资源模型'},
        {name: 'logic', label: '逻辑模型'},
        {name: 'staticLogic', label: '静态逻辑'},
        {name: 'twins', label: '孪生模型'},
      ]
    }
  },
  async created() {
    this.objectConlection = this.$modelObject.create('eventCollection')
    let flag = await this.objectConlection.queryInfo()
  },
  methods: {
    onMenuClick(item){
      this.curMenuItem = item
      
      this.allTmpModelData = item.name === 'all' ? this.allModelData : this.modelList[item.name + 'Models']
      if (item.children && item.children.length) {
        return
      }
    },
    dataChange() {
    }
  },
  props: {
    value:{
      default:()=>{
        return null;
      }
    },
  },
  computed: {
    menuData() {
      let res = []
      let eventObj = {}
      let eventCategory = []
      
      if (!this.objectConlection.records.length) {
        return res
      }
      this.objectConlection.records.forEach(item => {
        if (!eventObj[item.category]) {
          eventObj[item.category] = true
          eventCategory.push({ name: item.category, icon: 'ios-options' })
        }
      })

      res.push(
      {
        sourceType: 'model', name: 'model', label: '模型分类', icon: 'ios-cube', children: [
          ...this.modelObj,
          // {name: 'myCollection', label: '收藏的模型', icon: 'md-star'},
          // {name: 'logic', icon: 'ios-options'},
          // {name: 'resource', icon: 'ios-options'},
          // {name: 'consume', icon: 'ios-options'},
        ]
      })

      res.push({
        sourceType: 'event', name: 'event', label: '事件分类', icon: 'ios-albums',children: [
          { name: 'all', label: '全部', icon: 'ios-options' },
          ...eventCategory
        ]
      })
      // console.log("file: index.vue:130  watch-menuData", res)
      return res
    },
    ...mapState('admin/model', {
        modelTree: 'modelTree', 
        modelList: 'list',
        allModelData: 'all'
    }),
  },
}
</script>
